page {
	background: white;
}

.login-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	height: 100vh;
	padding: 80rpx var(--space-lg) calc(var(--space-xl) + var(--safe-area-inset-bottom-env));
	box-sizing: border-box;
}

/* --- 品牌区域 --- */
.brand-area {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 10vh;

	.logo {
		width: 180rpx;
		height: 180rpx;
		border-radius: var(--border-radius-md);
	}

	.app-name {
		margin-top: var(--space-md);
		font-size: var(--font-size-lg);
		font-weight: var(--font-weight-medium);
		color: var(--text-color-primary);
	}
	.app-desc {
		margin-top: var(--space-sm);
		font-size: var(--font-size-base);
		color: var(--text-color-secondary);
		letter-spacing: 4rpx;
	}
}

/* --- 操作区域 --- */
.action-area {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* --- 登录按钮 --- */
.login-button-wrapper {
	width: 70%;
	height: 96rpx;
	border-radius: var(--border-radius-lg);
	overflow: hidden;
	transition: opacity 0.3s ease, transform 0.1s ease;
	display: flex;
	justify-content: center;
	align-items: center;

	// 用于模拟点击效果
	&:active {
		transform: scale(0.98);
		opacity: 0.9;
	}

	&.disabled {
		opacity: 0.5;
		// pointer-events: none; // 在小程序中，JS层面的判断更可靠
	}

	// 加载中状态时，背景变为浅灰色
	&.loading {
		background-color: var(--bg-color-hover);
	}

	.login-button-image {
		width: 100%;
		height: 100%;
		vertical-align: middle; // 消除图片底部的间隙
	}
}

/* 纯CSS加载动画 */
.loading-spinner {
	width: 40rpx;
	height: 40rpx;
	border: 4rpx solid rgba(0, 0, 0, 0.1);
	border-left-color: var(--color-primary);
	border-radius: var(--border-radius-circle);
	animation: spin 1s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* --- 隐私协议 --- */
.privacy-area {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--space-md);
	padding: var(--space-sm);

	&.shake-animation {
		animation: shake 0.5s ease-in-out;
	}

	.checkbox-container {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-right: var(--space-xs); // 增加右侧内边距，分离文字
	}

	.checkbox {
		width: 32rpx;
		height: 32rpx;
		border: 2rpx solid var(--text-color-disabled);
		border-radius: var(--border-radius-circle);
		transition: all 0.2s ease-in-out;
		display: flex;
		align-items: center;
		justify-content: center;

		&.checked {
			background-color: var(--color-primary);
			border-color: var(--color-primary);

			.icon-check {
				width: 18rpx;
				height: 10rpx;
				border-left: 4rpx solid var(--text-color-white);
				border-bottom: 4rpx solid var(--text-color-white);
				transform: rotate(-45deg) translateY(0rpx);
			}
		}
	}

	.privacy-text {
		font-size: var(--font-size-sm);
		color: var(--text-color-secondary);
		line-height: var(--line-height-base);

		.link {
			color: var(--color-primary);
		}
	}
}

/* 提示错误的摇头动画 */
@keyframes shake {

	0%,
	100% {
		transform: translateX(0);
	}

	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translateX(-8rpx);
	}

	20%,
	40%,
	60%,
	80% {
		transform: translateX(8rpx);
	}
}